<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .search{
            width: 300px;
            height: 30px;
            margin:100px auto;
            background-color: orange;
            position: relative;
            font-family: 'Arial', "Microsoft YaHei UI";
        }

        .search input{
            width: 200px;
            line-height:25px;
            outline: none;
            padding-left:10px;
            cursor: text;
            font-family: 'Arial', "Microsoft YaHei UI";
            font-size: 16px;
        }

        .search label{
            position: absolute;
            left: 10px;
            top:5px;
            color: #9e9e9e;
            font-size: 16px;
            padding-left:24px;
            cursor: text;
        }

        .search i{
            position: absolute;
            left: 4px;
            top:2px;
            width: 18px;
            height: 18px;
            background: url("images/Search.png") no-repeat;
            background-size: contain;
        }
    </style>

    <script src="libs/jquery3_1_1.min.js"></script>
    <script>
        $(function () {
            $("#search").focus();
            $id("search").oninput = $id("search").onpropertychange = function () {
                if (this.value == "" || !this.value){
                    $("#search").siblings("label").css("display","block");
                }else {
                    $("#search").siblings("label").css("display","none");
                }
            }

            $id("search").onmouseover = function () {
                this.select();
            }

        });


        function $id(id) {
            return document.getElementById(id);
        }
    </script>
</head>
<body>
    <div class="search">
        <input type="text" id="search"><label for="search"><i></i>天天是个都比</label>
    </div>
</body>
</html>